<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/weblib/jslib/vue.js"></script>
    <script src="/weblib/jslib/time/moment-with-locales.min.js"></script>
</head>
<style>

    /*不管是inline-block还是block，
    我们需要理解其居中的原理，是inline-block，
    就对其父级元素添加text-align:center，
    是块级元素就对其本身添加margin:0 auto*/
    * {
        margin: 0;
        padding: 0;
        /*border: 1px solid black;*/
    }

    a {
        text-decoration: none;
        color: #333;
    }

    header {
        width: 100vw;
        height: 10vh;
        border-bottom: 1px solid black;
        /*box-shadow: h-shadow v-shadow blur spread color inset;*/
        box-shadow: 0 0 3px 1px;

    }

    header > a > img {
        margin-left: 5vw;
        float: left;
    }

    header > username, header > date, header > logout, header > a > username, header > a > date, header > a > logout {
        margin-right: 5vw;
        display: block;
        height: 10vh;
        float: right;
        line-height: 10vh;
        /*background: #FF416C;*/
        cursor: pointer;
    }


    footer {
        width: 100vw;
        text-align: center;
    }

    main {
        width: 100vw;
        height: 83vh;
        /*background: black;*/
    }

    iframe {
        width: 100vw;
        height: 100%;
        /*background: #5bc0de;*/
    }

</style>

<body>

<header>
    <a href="view.html"><img src="/main/pic/icon.png"/></a>
    <a href="/main/signin_signup/view.html">
        <logout>退出</logout>
    </a>
    <date>{{header.dateTime}}</date>
    <a>
        <username>{{header.name}}</username>
    </a>
</header>

<main>
    <!--
    allow-forms 允许提交表单
    allow-modals: 允许嵌入的浏览上下文打开模态窗口。
    allow-popups: 允许弹窗
    allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
    allow-storage-access-by-user-activation : 允许嵌入的浏览上下文通过 Storage Access API 使用父级浏览上下文的存储功能。
    -->
    <iframe src="main.html" frameborder="0">

    </iframe>
</main>

<link href="/weblib/csslib/animate.css" rel="stylesheet" type="text/css">
<footer>
    ©Copyright <b>LuJianBuPing</b> 2019-2020 <a href="https://gitee.com/aegontargaryen/opms-web">Gitee</a>
</footer>

<script>
    let app = new Vue({
        el: 'body>header',
        data: {
            header: {
                name: "慕华",
                dateTime: ""
            }
        },
    });
    moment.locale('zh');
    //额外执行一次，防止停顿一秒
    app.header.dateTime = moment().format('YYYY年MM月DD日，H时mm分ss秒');
    let dateTime = setInterval(function f() {
        app.header.dateTime = moment().format('YYYY年MM月DD日，H时mm分ss秒');
    }, 1000)();


</script>

</body>
</html>